<template>
	<view class="container">
		<view class="bar"></view>
		<view class="option-box" v-for="(item,index) in userInfo"  @click="toEditInfo(index)">
			<view class="option-title">{{item.name}}</view>
			<view class="option-arrow">
				<image class="my-bg" style="top:2rpx;" src="./images/arrow.png"></image>
			</view>
			<view v-if="index == 0" class="option-user-info">
				<view class="user-avatar">
					<image class="my-bg" :src="item.value"></image>
				</view>
			</view>
			<view v-else class="option-user-info" >
				{{item.value ? item.value : '请输入'}}
			</view>
			
		</view>
	
		<view class="bar"></view>
	
		<view class="logout-box" v-if="false" data-key="isLogoutBtnActive" bindtap="openPanelMask" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd">
			<image class="my-bg" :src="'./images/logout' + (isLogoutBtnActive ? '-active' : '') + '.png'"></image>
			<text class="logout-text" :style="isLogoutBtnActive ? 'color:red;' :''">退出登录</text>
		</view>
	</view>
	
	<view class="mask-action-panel" v-if="showPanelMask" @click="closePanelMask('closePanel')">
		<view class="action-panel">
			<view class="panel-msg">
				是否关闭？
			</view>
			<view class="panel-option">
				<view class="panel-option-confirm" data-key="isConfirmBtnActive" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd">
					<image class="my-bg" :src="'./images/button' + (isConfirmBtnActive ? '-active' :'') + '.png'"></image>
					<text class="option-button-text" style="{{isConfirmBtnActive ? 'color:red;' :''}}">确认</text>
				</view>
				<view class="panel-option-confirm" data-key="isCancelBtnActive" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd">
					<image class="my-bg" :src="'./images/button' + (isCancelBtnActive ? '-active' :'') + '.png'"></image>
					<text class="option-button-text" style="{{isCancelBtnActive ? 'color:red;' :''}}">取消</text>
				</view>
			</view>
	
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				showPanelMask: false,
				    isConfirmBtnActive: false,
				    userInfo: [{
				        name: '头像',
				        value: '',
				        key: 'avatar'
				      },
				      {
				        name: '昵称',
				        value: '',
				        key: 'nickname'
				      },
				      {
				        name: '年龄',
				        value: '',
				        key: 'age'
				      },
				      {
				        name: '手机号',
				        value: '',
				        key: 'mobile'
				      },
				      // {
				      //   name: '微信号',
				      //   value: '',
				      //   key: 'wechat'
				      // },
				      // {
				      //   name: '邮箱号',
				      //   value: '',
				      //   key: 'email'
				      // }
				    ]
			};
		},
		onShow() {
		    this.getUserInfoByToken()
		  },
		methods:{
			openPanelMask(e) {
				this.showPanelMask = true
			  },
			  closePanelMask(e) {
			    let value = e.target.dataset.value
			    if (value === 'closePanel') {
			      this.setData({
			        showPanelMask: false
			      })
			    }
			  },
			  handleTouchStart(e) {
			    let key = e.currentTarget.dataset.key
			    this.setData({
			      [key]: true
			    })
			
			  },
			  handleTouchEnd(e) {
			    let key = e.currentTarget.dataset.key
			    this.setData({
			      [key]: false
			    })
			    if (key.indexOf('Cancel') !== -1) {
			      this.closePanelMask({
			        target: {
			          dataset: {
			            value: 'closePanel'
			          }
			        }
			      })
			    } else {
			      // 要做的事情
			    }
			  },
			  toEditInfo(index) {
			    let obj = this.userInfo[index]
			    let params = encodeURI(JSON.stringify(obj))
			    if(obj.key == 'mobile'){
			      return  uni.navigateTo({
			        url: '/pages/login/login?mobile=' + obj.originValue,
			      })
			    }
			    uni.navigateTo({
			      url: '/pages/user-info-edit/user-info-edit?info=' + params,
			    })
			  },
			  getUserInfoByToken() {
				  const baseUrl = getApp().globalData.baseUrl
			    let _self = this
			    uni.request({
			      url: baseUrl + '/api/getUserInfoByToken',
			      method: 'POST',
			      header: {
			        'token': uni.getStorageSync('token'),
			        'cookie': uni.getStorageSync('cookie')
			      },
			      success(res) {
			        let result = res.data
			        if (result.statusCode !== 0) {
			          return uni.showToast({
			            title: result.msg,
			            icon: 'error'
			          })
			        }
			        uni.setStorageSync('loginInfo', res.data.data)
			        let loginInfo = uni.getStorageSync('loginInfo')
			        for (let i of _self.userInfo) {
			          if(i.key == 'mobile'){
			            i.value = loginInfo[i.key].slice(0,3) + '****' + loginInfo[i.key].slice(7,11)
			            i.originValue = loginInfo[i.key]
			          } else {
			            i.value = loginInfo[i.key]
			          }
			        }
					//_self.userInfo =  _self.data.userInfo
					console.log(_self.userInfo)
			      },
			      fail(error) {
			        console.log(error)
			      }
			    })
			  }
		}
	}
</script>

<style lang="less">
/* pages/setting/setting.wxss */
.container{
  background-color: #f7f7f7;
  width: 100vw;
  box-sizing: border-box;
  height: 100vh;
  font-family: SourceHanSansCN-Regular;
}
/* 遮罩层样式 */
.mask-action-panel{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.4);
  z-index: 999;
}
.action-panel{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  border-radius: 40rpx 40rpx 0 0;
  background-color: #E9E8EE;
  padding: 48rpx 36rpx;
}
.panel-msg{
  width: 100%;
  font-size: 38rpx;
  color: #666;
  text-align: center;
  margin-bottom: 32rpx;
}
.panel-option{
  width: 100%;
  position: relative;
  height: 184rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-option-confirm{
  width: 344rpx;
  height: 184rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.option-button-text{
  z-index: 999;
  font-size: 36rpx;
  color: #999;
}
/**/
.option-box{
  position: relative;
  width: 100%;
  height: 106rpx;
  box-sizing: border-box;
  padding: 37rpx 28rpx;

  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bar{
  width: 100%;
  height: 13rpx;
  background-color: #fff;
}
.option-title{
  font-size: 32rpx;
  color: #666;
}
.option-arrow{
  width: 20rpx;
  height: 28rpx;
  position: relative;
}
.option-user-info{
  position: absolute;
  right: 70rpx;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #999;
}
.user-avatar{
  width: 64rpx;
  height: 64rpx;
  border-radius: 64rpx;
  background-color: #999;
  position: relative;
  overflow:hidden;
}
.my-bg{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.logout-box{
  position: absolute;
  width: 376rpx;
  height: 156rpx;
  position: absolute;
  left: calc((100vw - 376rpx)/2);
  bottom: 122rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logout-text{
  z-index: 200;
  font-size: 36rpx;
  color: #999;
}
</style>
